<template>
    <l-layout class="l-tab-page" :left="300">
        <template #left  > 
            <l-panel :title="$t('公司信息')" style="padding-right:0;" >
                <el-tree :data="companyTree" default-expand-all :expand-on-click-node="false"  @node-click="handleCompanyClick">
                    <span class="lr-tree-node"  slot-scope="{ node}">
                        <i class="fa fa-sitemap"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-select-panel
                style="padding:8px;padding-left:0;"
                ref="selectPanel"
                v-model="value"
                :selectedData.sync="selectedData"
                :columns="columns"
                :isTree="true"
                :isPage="false"
                :loadSelectTable="loadSelectTable"
                
                model="client"
                
                idKey="f_DepartmentId"
                pidKey="f_ParentId"
                valueKey="f_DepartmentId"
                labelKey="f_FullName"
            >
        </l-select-panel>
    </l-layout>
</template>

<script>

export default {
    name:'l-department-select-panel',
    data () {
        return {
            value:'',
            selectCompanyId:'',

            selectedData:[],
            columns: [
                {label:'名称',prop:'f_FullName',minWidth:'150'},
                {label:'编码',prop:'f_EnCode',width:'100'},
                {label:'性质',prop:'f_Nature',width:'80',align:'center'},
            ]
        }
    },
    computed:{
        companyTree(){
            if(this.lr_companyTree){
                return this.lr_companyTree
            }
            else{
                return []
            }
        },
    },
    created(){
        this.lr_loadCompanys && this.lr_loadCompanys()
    },
    methods:{
        handleCompanyClick(node){
            this.companyId = node.f_CompanyId
            this.tableLoadData()
        },
        tableLoadData(){
            this.$refs.selectPanel.init()
        },
        async loadSelectTable(postData){
            await this.lr_loadDepartments(this.companyId)
            let data = this.lr_departments[this.companyId]
            if(!this.$validatenull(postData.keyword)){
                data = data.filter(item => item.f_FullName.indexOf(postData.keyword) >-1 || item.f_EnCode.indexOf(postData.keyword)>-1)
            }
            return {rows:data}            
        },
        resetForm(){
            this.$refs.selectPanel.reset()
            this.tableLoadData()
        },
        getForm(){
            return this.$deepClone(this.selectedData)
        }
    }
}
</script>